<template>
  <div>
    <van-tabs v-model="active" :ellipsis="false" :animated="false" @click="Change">
      <van-tab :title="item1 + '排行榜'"  v-for="(item1, index) of type" :key="index" title-style="font-size:.13rem;flex-basis: 29.3333%;">
        <ul class="hotlist" :hotlist="hotlist">
          <li class="hotitem" v-for="(item, index) of hotlist" :key="item.proid" @click="toDetail(item.proid)">
            <p class="iconfont icon-huangguan biaoshi" v-if="index === 0 || index === 1 || index === 2" :style="addcolor(index)"></p>
            <div class="bgcolor" :style="randomRgb(0.7)">
              <div class="rank">
              <h2>Top{{index + 1}}</h2>
              <span class="iconfont icon-aixin" style="float:right;color:white;margin-right:.1rem;"></span>
            </div>
            <div class="itemimg">
              <van-image
               lazy-load
               :src="item.proimg"
              />
            </div>
            <div class="iteminfo desc">
              <h3>{{ item.name }}</h3>
              <h3>销量:{{ item.sales }}</h3>
            </div>
            </div>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tab, Tabs, Icon, Lazyload, Image } from 'vant'
import { getProlist, getCategoryTypeList } from '@/api'
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Icon)
Vue.use(Image)
Vue.use(Lazyload)
export default {
  data () {
    return {
      hotlist: [],
      typelist: [], // 产品所有类型
      active: 0,
      type: ['总', '剃须刀', '电吹风', '理发器', '熨烫系列', '毛球修剪器', '插座'],
      bank: ['烫发器', '挂烫机', '电熨斗'],
      list: ['red', 'green', 'yellow']
    }
  },
  mounted () {
    // 默认显示总排行
    this.Change(0)
  },
  methods: {
    // 生成随机颜色
    randomRgb (a) {
      const R = Math.floor(Math.random() * 255)
      const G = Math.floor(Math.random() * 255)
      const B = Math.floor(Math.random() * 255)
      return {
        // width: (item.num / item.total * 100) + '%', // 进度条
        background: 'rgb(' + R + ',' + G + ',' + B + ',' + a + ')'
      }
    },
    addcolor (index) {
      return 'color: ' + (this.list[index])
    },
    toDetail (proid) {
      this.$router.push({ path: '/product/' + proid })
    },
    // 显示对应产品类型的排行榜
    // 通过索引值控制选择产品类型进行相对应的数据展示
    Change (index) {
      // 显示总排行榜，按销量排序
      if (index === 0) {
        getProlist().then(res => {
          const arr = res.data.data.sort((a, b) => {
            return b.sales - a.sales
          }).filter((item, index) => {
            return index < 10
          })
          this.hotlist = arr
          console.log(this.hotlist)
        })
      // 类型排行榜
      } else {
        getCategoryTypeList({
          type: this.type[index]
        }).then(res => {
          if (this.type[index] === '熨烫系列') {
            // 过滤出熨烫系列产品
            getProlist().then(res => {
              const brr = res.data.data.filter((item, index) => {
                return item.type === '挂烫机' || item.type === '烫发器' || item.type === '电熨斗'
              }).sort((a, b) => {
                return b.sales - a.sales
              }).filter((item, index) => {
                return index < 5
              })
              this.hotlist = brr
            })
          // 非熨烫系列产品
          } else {
            const crr = res.data.data.sort((a, b) => {
              return b.sales - a.sales
            }).filter((item, index) => {
              return index < 5
            })
            this.hotlist = crr
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.hotlist {
  @include clearfix();
  @include rect(100%,auto);
  overflow: auto;
  white-space: nowrap;
  .biaoshi {
    text-align: center;
  }
  .hotitem {
    @include display(inline-block);
    @include rect(1.2rem,auto);
    @include margin(0 0.06rem .2rem);
    border-radius: .15rem;
    overflow: hidden;
    .bgcolor {
      border-radius: .15rem;
      overflow: hidden;
    }
    .itemimg {
      @include rect(100%, auto);
      @include display(block);
      img {
        @include rect(100%,auto);
        @include display(block);
        position: relative;
        z-index: 999;
        background-color: #fff;
      }
    }
    .iteminfo {
      @include rect(100%,auto);
      @include display(block);
      h3 {
        @include font-size(.13rem);
        line-height:.2rem;
        text-align: center;
        color: white;
      }
    }
  }
.rank {
  h2 {
    font-size: .14rem;
    margin-left: .1rem;
    line-height: .3rem;
    display: inline-block;
    color: white;
  }
}
}
</style>
